<style include="cr-hidden-style cr-icons">
  :host {
    --cr-url-list-item-image-container-border_: 2px solid white;
    /* Intentionally 1px higher than the inherited border radius to avoid
     * anti-aliasing issues.
     */
     --cr-url-list-item-image-container-border-radius_: 5px;
    align-items: center;
    box-sizing: border-box;
    cursor: default;
    display: flex;
    height: 52px;
    padding: 6px 16px;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --cr-url-list-item-image-container-border_: 2px solid black;
    }
  }

  :host-context([chrome-refresh-2023]):host {
    height: 48px;
    padding: 4px 16px;
  }

  :host-context([chrome-refresh-2023]):host([size=medium]),
  :host-context([chrome-refresh-2023]):host([size=large]) {
    --cr-url-list-item-image-container-border-radius_: 9px;
  }

  :host([size=compact]) {
    height: 32px;
    padding: 8px 20px;
  }

  :host([size=large]) {
    height: 68px;
    padding: 6px 16px;
  }

  :host-context([chrome-refresh-2023]):host([size=compact]),
  :host-context([chrome-refresh-2023]):host([size=large]) {
    padding: 6px 16px;
  }

  :host-context([chrome-refresh-2023]):host([size=compact]) {
    height: 36px;
  }

  :host-context([chrome-refresh-2023]):host([size=large]) {
    height: 68px;
  }

  :host(.hovered),
  :host([force-hover]) {
    background: var(--cr-hover-background-color);
  }

  :host(.active),
  :host-context(.focus-outline-visible):host(:focus-within) {
    background: var(--cr-active-background-color);
  }

  ::slotted([slot=prefix]) {
    margin-inline-end: 16px;
  }

  #iconContainer {
    align-items: center;
    background: var(--google-grey-50);
    border-radius: 4px;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    margin-inline-end: 16px;
    overflow: hidden;
    width: 40px;
  }

  @media (prefers-color-scheme: dark) {
    #iconContainer {
      --cr-icon-color: var(--google-grey-100);
      background: rgba(var(--google-grey-200-rgb), .11);
    }
  }

  :host([size=compact]) #iconContainer {
    background: transparent;
    height: 16px;
    margin-inline-end: 12px;
    width: 16px;
  }

  :host-context([chrome-refresh-2023]) #iconContainer {
    background: var(--color-list-item-url-favicon-background,
        var(--cr-fallback-color-neutral-container));
  }

  :host-context([chrome-refresh-2023]):host([is-folder_]) #iconContainer {
    background: var(--color-list-item-folder-icon-background,
        var(--cr-fallback-color-primary-container));
    color: var(--color-list-item-folder-icon-foreground,
        var(--cr-fallback-color-on-primary-container));
  }

  :host-context([chrome-refresh-2023]):host([size=compact]) #iconContainer {
    height: 24px;
    margin-inline-end: 8px;
    width: 24px;
  }

  :host([size=large]) #iconContainer {
    height: 56px;
    margin-inline-end: 16px;
    width: 56px;
  }

  :host-context([chrome-refresh-2023]):host([size=medium]) #iconContainer,
  :host-context([chrome-refresh-2023]):host([size=large]) #iconContainer {
    border-radius: 8px;
  }

  .favicon {
    background-position: center center;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
  }

  :host([size=large]) .folder-and-count {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(2, 50%);
    height: 100%;
    justify-items: center;
    width: 100%;
  }

  .folder-and-count .image-container {
    border-bottom: var(--cr-url-list-item-image-container-border_);
    border-radius: 0 var(--cr-url-list-item-image-container-border-radius_)
        0 0;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  :host-context([dir=rtl]) .folder-and-count .image-container {
    border-radius: var(--cr-url-list-item-image-container-border-radius_)
        0 0 0;
  }

  .folder-and-count .image-container img {
    height: 100%;
    object-fit: cover;
    opacity: 95%;
    width: 100%;
  }

  /* If there is only 2 imgs, span the 1st image across both rows. */
  .folder-and-count:not(:has(div:nth-child(3)))
  .image-container:first-of-type {
    border-bottom: none;
    border-inline-end: var(--cr-url-list-item-image-container-border_);
    border-radius: var(--cr-url-list-item-image-container-border-radius_) 0 0
        var(--cr-url-list-item-image-container-border-radius_);
    grid-row: 1 / span 2;
  }

  :host-context([dir=rtl]) .folder-and-count:not(:has(div:nth-child(3)))
  .image-container:first-of-type {
    border-radius: 0 var(--cr-url-list-item-image-container-border-radius_)
        var(--cr-url-list-item-image-container-border-radius_) 0;
  }

  /* If there is only 1 img, span the entire grid. */
  .folder-and-count:not(:has(div:nth-child(2))) .image-container:first-of-type {
    border: none;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  .folder {
    --cr-icon-color: currentColor;
    height: 16px;
    margin: 0;
    width: 16px;
  }

  .count {
    --cr-url-list-item-count-border-radius: 4px;
    display: none;
  }

  :host([size=large]) .count {
    align-items: center;
    background: var(--google-grey-50);
    border-radius: var(--cr-url-list-item-count-border-radius) 0 0 0;
    display: flex;
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    justify-content: center;
    width: 100%;
    z-index: 1;
  }

  :host-context([dir=rtl]):host([size=large]) .count {
    border-radius: 0 var(--cr-url-list-item-count-border-radius) 0 0;
  }

  .folder-and-count:has(div:nth-child(2)) .count {
    border-radius: 0;
  }

  @media (prefers-color-scheme: dark) {
    :host([size=large]) .count {
      background: rgba(var(--google-grey-200-rgb), .11);
    }
  }

  :host-context([chrome-refresh-2023]):host([size=large]) .count {
    background: var(--color-list-item-folder-icon-background,
        var(--cr-fallback-color-primary-container));
  }

  .image-container {
    /*
     * Acts as an overlay to images with some transparency, to ensure contrast
     * against the row background.
     */
    background: black;
    border-radius: var(--cr-url-list-item-image-container-border-radius_);
    height: 100%;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    .image-container {
      background: transparent;
    }
  }

  .metadata {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  :host([size=compact]) .metadata {
    align-items: center;
    flex-direction: row;
  }

  :host-context([chrome-refresh-2023]):host([size=compact]) .metadata,
  :host-context([chrome-refresh-2023]):host([size=medium]) .metadata {
    gap: 4px;
  }

  :host([size=large]) .metadata {
    gap: 4px;
  }

  :host-context([chrome-refresh-2023]):host([size=large]) .metadata {
    gap: 2px;
  }

  .title {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--cr-primary-text-color);
    display: inline;
    font-size: 13px;
    font-weight: 400;
    padding: 0;
    text-align: start;
  }

  :host-context([chrome-refresh-2023]) .title {
    font-size: 12px;
    font-weight: 500;
  }

  .title:focus {
    outline: none;
  }

  .descriptions {
    align-items: center;
    display: flex;
    gap: 3px;
    height: 14px;
  }

  :host([size=compact]) .descriptions {
    display: contents;
  }

  :host([size=large]) .descriptions {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    height: auto;
  }

  :host(:not([has-descriptions_])) .descriptions {
    display: none;
  }

  .description {
    color: var(--cr-secondary-text-color);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 400;
  }

  :host-context([chrome-refresh-2023]) .description {
    font-size: 11px;
    font-weight: 400;
  }

  .title,
  .description {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .badges {
    align-items: flex-start;
    display: flex;
    gap: 4px;
    min-width: fit-content;
  }

  :host(:not([has-badges_])) .badges {
    display: none;
  }

  .suffix-icons {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  ::slotted(cr-icon-button[slot=suffix-icon]) {
    --cr-icon-button-icon-size: 16px;
    --cr-icon-button-size: 24px;
    --cr-icon-button-margin-end: 0;
    --cr-icon-button-margin-start: 0;
    display: none;
  }

  :host(.hovered) ::slotted(cr-icon-button[slot=suffix-icon]),
  :host-context(.focus-outline-visible):host(:focus-within)
      ::slotted(cr-icon-button[slot=suffix-icon]),
  :host([always-show-suffix-icons])
      ::slotted(cr-icon-button[slot=suffix-icon]) {
    display: block;
  }

  .url-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 95%;
    width: 100%;
  }
</style>

<slot name="prefix"></slot>
<div id="iconContainer">
  <div class="favicon" hidden$="[[!shouldShowFavicon_(url, size, imageUrls)]]"
      style$="background-image: [[getFavicon_(url)]];">
  </div>
  <div class="image-container"
      hidden$="[[!shouldShowUrlImage_(
          url, size, imageUrls, firstImageLoaded_)]]">
    <img class="url-image" is="cr-auto-img" auto-src="[[imageUrls.0]]">
  </div>
  <div class="folder-and-count"
      hidden$="[[!shouldShowFolderCount_(url, count)]]">
    <template is="dom-if" if="[[shouldShowFolderImages_(size)]]" restamp>
      <template is="dom-repeat" items="[[imageUrls]]"
          filter="shouldShowImageUrl_">
        <div class="image-container" hidden$="[[!firstImageLoaded_]]">
          <img class="folder-image" is="cr-auto-img" auto-src="[[item]]">
        </div>
      </template>
    </template>
    <slot id="folder-icon" name="folder-icon">
      <div class="folder cr-icon icon-folder-open"
          hidden$="[[!shouldShowFolderIcon_(size, imageUrls)]]"></div>
    </slot>
    <div class="count">[[getDisplayedCount_(count)]]</div>
  </div>
</div>
<slot name="content">
  <div id="metadata" class="metadata">
    <button class="title"
        aria-label="[[getButtonAriaLabel_(title, buttonAriaLabel)]]"
        aria-description="[[
            getButtonAriaDescription_(description, buttonAriaDescription)]]">
      [[title]]
    </button>
    <div class="descriptions">
      <div class="description" hidden$="[[!description]]">[[description]]</div>
      <div class="badges">
        <slot id="badges" name="badges" on-slotchange="onBadgesSlotChange_">
        </slot>
      </div>
    </div>
  </div>
</slot>
<div class="suffix-icons">
  <slot name="suffix-icon"></slot>
</div>
